<template>
  <div class="report-container">
    <!-- 1. 报告顶部导航和标题 -->
    <header class="report-header">
      <div class="header-nav">
        <div class="header-logo">
          <v-icon color="primary" class="mr-2">mdi-car-electric</v-icon>
          印尼新能源汽车
        </div>
        <div class="header-links">
          <span>市场分析</span>
          <span>目标客群</span>
          <span>竞品分析</span>
          <span class="active">产品定义</span>
        </div>
      </div>
      <h1 class="main-title">印尼新能源汽车产品定义报告</h1>
      <p class="subtitle">2025年市场分析与战略规划</p>
    </header>

    <!-- 2. 市场概况与政策环境 -->
    <v-card class="report-card" flat>
      <v-card-title class="section-title">
        <v-icon class="mr-3" color="blue">mdi-chart-bar</v-icon>
        一、市场概况与政策环境
      </v-card-title>
      <v-card-text>
        <v-row>
          <v-col cols="12" md="6">
            <h3 class="sub-heading">1.1 市场规模与增长趋势</h3>
            <p>2025年上半年，印尼纯电动汽车销量达35,748辆，同比增长267%，中国品牌最大份额93%市场份额。</p>
            <v-alert density="compact" variant="tonal" color="blue" icon="mdi-information-outline" class="mb-4">
              注意: 比亚迪以14,193辆销量稳居第一，奇瑞 OMODA E5 (6,250辆)紧随其后。
            </v-alert>
            <p>市场渗透率从2023年的2%提升至2025年的8%，预计2030年将突破20%。</p>
          </v-col>
          <v-col cols="12" md="6">
            <h3 class="sub-heading">1.2 政策支持体系</h3>
            <ul class="custom-list">
              <li><v-icon small color="blue-darken-2" class="mr-2">mdi-file-document-check-outline</v-icon><strong>税收激励:</strong> 每台电动汽车享受100%奢侈品税减免 (2025年H1)，增值税从11%降至1%，进口关税豁免至2026年底</li>
              <li><v-icon small color="blue-darken-2" class="mr-2">mdi-factory</v-icon><strong>本地化要求:</strong> 2026年本地组件需达40%，2027年提升至60%，电池本地化生产可获额外补贴</li>
              <li><v-icon small color="blue-darken-2" class="mr-2">mdi-charging-station</v-icon><strong>基础设施规划:</strong> 国有电力公司PLN计划2030年建成8万个充电桩，V-Green牵头企业将在2025年底前部署6.3万个充电端口</li>
            </ul>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <!-- 3. 细分市场分析 -->
    <v-card class="report-card" flat>
      <v-card-title class="section-title">
        <v-icon class="mr-3" color="purple">mdi-chart-pie</v-icon>
        二、细分市场分析
      </v-card-title>
      <v-card-text>
        <v-row>
          <v-col cols="12" md="5">
            <h3 class="sub-heading">2.1 价格区间分布</h3>
            <v-card variant="tonal" color="blue" class="price-segment">
              <strong>高端市场 (35,000-40,000 USD)</strong>
              <p>年增长率30%，占比仅15%，代表车型为特斯拉Model X (45,000 USD)、比亚迪唐EV (28,000 USD)</p>
            </v-card>
            <v-card variant="tonal" color="indigo" class="price-segment">
              <strong>中端市场 (30,000-35,000 USD)</strong>
              <p>市场空白区域，同时满足500km+续航、7座布局的车型占比不足8%</p>
            </v-card>
            <v-card variant="tonal" color="purple" class="price-segment">
              <strong>经济型市场 (<15,000 USD)</strong>
              <p>占比35%，主要车型为五菱Air ev (18,000 USD)、哪吒V (16,500 USD)</p>
            </v-card>
          </v-col>
          <v-col cols="12" md="7">
            <h3 class="sub-heading">2.2 用途场景细分</h3>
            <v-table density="compact">
              <thead><tr><th>场景</th><th>占比</th><th>核心需求</th><th>代表车型</th></tr></thead>
              <tbody>
              <tr><td>家庭长途出行</td><td>38%</td><td>续航>400km、第三排空间</td><td>三菱Destinator、比亚迪唐EV</td></tr>
              <tr><td>商务接待</td><td>25%</td><td>舒适性配置、品牌形象</td><td>腾势D9 EV、丰田Granvia</td></tr>
              <tr><td>日常通勤</td><td>32%</td><td>灵活性、低使用成本</td><td>五菱缤果、奇瑞Omoda E5</td></tr>
              <tr><td>商用物流</td><td>5%</td><td>载货空间、耐用性</td><td>上汽大通EV30、吉利远程E6</td></tr>
              </tbody>
            </v-table>
          </v-col>
        </v-row>
        <div class="chart-wrapper">
          <SimpleBarChart :chart-data="penetrationChartData" />
        </div>
      </v-card-text>
    </v-card>

    <!-- 其他分区... -->
    <v-card class="report-card" flat>
      <v-card-title class="section-title">
        <v-icon class="mr-3" color="green">mdi-account-group-outline</v-icon>
        三、目标群体画像
      </v-card-title>
      <v-card-text>
        <v-row>
          <v-col cols="12" md="5">
            <h3 class="sub-heading">3.1 基础特征</h3>
            <div class="feature-item"><v-icon color="green">mdi-account-group-outline</v-icon><span><strong>demographics:</strong> 35-45岁已婚家庭 (3-4孩)，雅加达、泗水等一线城市占比62%</span></div>
            <div class="feature-item"><v-icon color="green">mdi-cash-multiple</v-icon><span><strong>经济属性:</strong> 家庭月收入15,000-30,000 USD，金融、贸易行业从业者为主</span></div>
            <div class="feature-item"><v-icon color="green">mdi-car-side</v-icon><span><strong>用车行为:</strong> 每周2-3次城际出行 (50-300km)，每月1-2次长途旅行 (300-500km)</span></div>
          </v-col>
          <v-col cols="12" md="7">
            <h3 class="sub-heading">3.2 需求优先级</h3>
            <v-card variant="tonal" color="green" class="demand-card"><strong>刚性需求</strong><p>7座布局 (83%关注度)、续航>450km (70%)、儿童安全接口 (68%)</p></v-card>
            <v-card variant="tonal" color="teal" class="demand-card"><strong>弹性需求</strong><p>座椅通风 (65%)、防潮空调 (58%)、本地导航适配 (52%)</p></v-card>
            <v-card variant="tonal" color="cyan" class="demand-card"><strong>决策因素</strong><p>终端价格 (预估30,000-35,000 USD)、售后服务网络 (47%)、充电便利性 (42%)</p></v-card>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <v-card class="report-card" flat>
      <v-card-title class="section-title">
        <v-icon class="mr-3" color="red">mdi-sword-cross</v-icon>
        四、竞品分析
      </v-card-title>
      <v-card-text>
        <h3 class="sub-heading">4.1 主要竞品对比</h3>
        <v-table density="compact">
          <thead><tr><th>车型</th><th>续航</th><th>第三排腿部空间</th><th>终端价格</th><th>本地化配置</th><th>核心劣势</th></tr></thead>
          <tbody>
          <tr v-for="item in competitors" :key="item.model" :class="item.class">
            <td>{{item.model}}</td><td>{{item.range}}</td><td>{{item.space}}</td><td>{{item.price}}</td><td>{{item.config}}</td><td>{{item.weakness}}</td>
          </tr>
          </tbody>
        </v-table>
        <h3 class="sub-heading">4.2 中国品牌竞争格局</h3>
        <v-row>
          <v-col><v-card variant="tonal" color="red-lighten-1" class="brand-card"><h4>比亚迪</h4><p>2025年H1销量14,093辆，市占率38.5%，ATTO 3和海豹车型贡献72%销量</p></v-card></v-col>
          <v-col><v-card variant="tonal" color="blue-lighten-1" class="brand-card"><h4>五菱</h4><p>凭借Air ev和缤果两款双马车策略，占据微型电动车市场52%的份额</p></v-card></v-col>
          <v-col><v-card variant="tonal" color="purple-lighten-1" class="brand-card"><h4>奇瑞</h4><p>Omoda E5以3,465辆销量进入细分市场前三，本地化率达59%</p></v-card></v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <v-card class="report-card" flat>
      <v-card-title class="section-title">
        <v-icon class="mr-3" color="orange">mdi-lightbulb-on-outline</v-icon>
        五、市场趋势与机会点
      </v-card-title>
      <v-card-text>
        <v-card variant="tonal" color="yellow-lighten-5" class="pa-4">
          <v-row>
            <v-col cols="12" md="6">
              <h3 class="sub-heading">5.1 技术趋势</h3>
              <ul class="custom-list tech-trends">
                <li ><v-icon small color="orange" class="mr-2">mdi-battery-charging</v-icon><strong class="mr-2">电池本地化:</strong>宁德时代、贝特瑞等企业在印尼建设电池工厂，2025年产能将达20GWh</li>
                <li><v-icon small color="orange" class="mr-2">mdi-brain</v-icon><strong class="mr-2">智能网联:</strong > 85%新车车主活跃使用网联功能，支持印尼语语音交互的车型增长40%</li>
                <li><v-icon small color="orange" class="mr-2">mdi-coolant-temperature</v-icon><strong class="mr-2">热带适配性:</strong> 防霉菌空调、高温电池冷却系统成为标配，比亚迪、五菱专项优化</li>
              </ul>
            </v-col>
            <v-col cols="12" md="6">
              <h3 class="sub-heading">5.2 战略机会</h3>
              <div class="opportunity-item">
                <div class="opportunity-title">填补价格空白</div>
                <p>30,000-35,000 USD价格带推出7座纯电MPV，续航超500km</p>
              </div>
              <div class="opportunity-item">
                <div class="opportunity-title">充电网络合作</div>
                <p>与V-Green、PLN合作建设目的地快充和换电网络，覆盖雅加达、巴厘岛等热门路线</p>
              </div>
              <div class="opportunity-item">
                <div class="opportunity-title">政策套利</div>
                <p>利用本地化生产的税收优惠，2026年可实现40%本地组件率可降低总成本12.15%</p>
              </div>
            </v-col>
          </v-row>
        </v-card>
      </v-card-text>
    </v-card>

    <v-card class="report-card" flat>
      <v-card-title class="section-title">
        <v-icon class="mr-3" color="red-darken-2">mdi-alert-outline</v-icon>
        六、风险与挑战
      </v-card-title>
      <v-card-text>
        <!-- 关键改动: 使用与品牌格局相同的卡片式布局 -->
        <v-row>
          <v-col v-for="risk in risks" :key="risk.title">
            <v-card variant="tonal" color="red-lighten-1" class="risk-card">
              <h4>{{ risk.title }}</h4>
              <p>{{ risk.description }}</p>
            </v-card>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <v-card class="report-card" flat>
      <v-card-title class="section-title">
        <v-icon class="mr-3" color="indigo">mdi-clipboard-edit-outline</v-icon>
        七、产品定义
      </v-card-title>
      <v-card-text>
        <h3 class="sub-heading">7.1 核心参数</h3>
        <v-row dense>
          <v-col v-for="param in coreParams" :key="param.title" cols="12" sm="6" md="4">
            <v-card variant="outlined" class="param-card">
              <div>{{ param.title }}</div>
              <div><strong>{{ param.value }}</strong></div>
            </v-card>
          </v-col>
        </v-row>
        <h3 class="sub-heading">7.2 差异化配置</h3>
        <v-table density="compact">
          <thead><tr><th>功能类别</th><th>具体配置</th><th>竞品对比优势</th></tr></thead>
          <tbody>
          <tr v-for="config in diffConfig" :key="config.category">
            <td>{{ config.category }}</td>
            <td>{{ config.spec }}</td>
            <td>{{ config.advantage }}</td>
          </tr>
          </tbody>
        </v-table>
        <h3 class="sub-heading">7.3 市场定位</h3>
        <v-table density="compact">
          <tbody>
          <tr>
            <td><strong>核心价值</strong></td>
            <td>雅加达-巴厘岛跨城家庭旅行 (450km单程)</td>
            <td><strong>目标人群</strong></td>
            <td>35-45岁中高收入家庭 (月收入15,000-30,000 USD)</td>
          </tr>
          <tr>
            <td><strong>竞品对标</strong></td>
            <td>较三菱Destinator纯电版价格低8%，较现代IONIQ 7续航多70km</td>
            <td><strong>投产计划</strong></td>
            <td>2026年Q1印尼万丹工厂投产，本地化率42% (满足税收优惠要求)</td>
          </tr>
          </tbody>
        </v-table>
      </v-card-text>
    </v-card>

    <!-- 报告底部信息 -->
    <footer class="report-footer">
      <p>数据来源：印尼汽车工业协会 (2025)、PWC消费者调研 (2024)、MIR DATABANK行业报告</p>
      <p>页面内容由AI生成，仅供参考</p>
    </footer>
  </div>
</template>

<script setup>
import SimpleBarChart from '@/components/SimpleBarChart.vue';
// --- 数据区 ---
// 为ECharts准备数据
const penetrationChartData = {
  title: '印尼纯电动汽车市场渗透率趋势',
  legend: '市场渗透率(%)',
  categories: ['2023', '2025', '2030(预测)'],
  values: [2, 8, 20]
};

const risks = [
  { title: '基础设施滞后', description: '当前充电桩比仅0.8个/千台车，雅加达以外地区覆盖率不足30%' },
  { title: '日系品牌反击', description: '丰田计划2026年推出5款电动车型，三菱Destinator上市两月订单达2,000辆' },
  { title: '电池供应链', description: '镍加工技术依赖进口，本土精炼产能仅能满足35%需求' },
];

const chartData = [
  { year: '2023', value: 2 },
  { year: '2025', value: 8 },
  { year: '2030(预测)', value: 20 },
];
const competitors = [
  { model: '比亚迪唐EV', range: '505km', space: '68cm', price: '28,000 USD', config: '整改快充模块', weakness: '价格过高' },
  { model: '特斯拉Model X', range: '560km', space: '65cm', price: '45,000 USD', config: '天然气报警功能适配', weakness: '价格远超目标群体预算' ,class: 'highlight-row'},
  { model: '现代IONIQ 7', range: '480km', space: '70cm', price: '26,000 USD', config: '空调无防霉功能', weakness: '续航无法满足长途需求、巴厘岛里程' },
  { model: '丰田Innova Crysta (燃油)', range: '800km (综合油耗)', space: '60cm', price: '23,000-25,700 USD', config: '无电动化配置', weakness: '燃油成本高，不符合环保趋势', class: 'highlight-row' },
  { model: '本地组装丰田bz4x 7座版', range: '450km', space: '62cm', price: '24,500 USD', config: '车机系统功能阉割', weakness: '续航短，智能化配置不足' },
];
const coreParams = [
  { title: '车型名称', value: '“星光”7座纯电MPV' },
  { title: '目标价格', value: '32,500 USD (终端价)' },
  { title: '续航里程', value: '550km (CLTC标准)' },
  { title: '电池规格', value: '82kWh磷酸铁锂电池 (支持PLN快充协议)' },
  { title: '座位布局', value: '2+2+3七座布局，第三排腿部空间83cm' },
  { title: '充电性能', value: '30分钟快充至80%，适配95%本地充电桩' },
];
const diffConfig = [
  { category: '空调设计', spec: '三排独立通风座椅、第三排ISOFIX接口×3', advantage: '较竞品比亚迪唐EV增加15cm腿部空间' },
  { category: '气候适应', spec: '防霉菌空调系统 (湿度>80%自动激活)、花粉过滤', advantage: '独有热带气候专项优化' },
  { category: '智能交互', spec: '印尼语语音交互车机、双导览 (Google Maps+Gojek Maps)', advantage: '本地化应用整合度最高' },
  { category: '充电兼容', spec: '适配95%本地充电桩，30分钟快充至80%', advantage: '无需改装充电模块' },
  { category: '座舱设计', spec: '离地间隙220mm (较竞品地域低30mm)', advantage: '适应印尼复杂路况' },
];
</script>

<style scoped>
/* 主容器和头部 */
.report-container { background-color: #f8f9fc; padding: 24px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.report-header { text-align: center; margin-bottom: 24px; }
.header-nav { display: flex; justify-content: space-between; align-items: center; max-width: 1000px; margin: 0 auto 24px auto; padding-bottom: 16px; border-bottom: 1px solid #e0e6f1; }
.header-logo { font-weight: 600; color: #1a2b4e; display: flex; align-items: center; }
.header-links span { margin: 0 12px; color: #5a6a8a; font-weight: 500; cursor: pointer; }
.header-links span.active { color: #1976D2; font-weight: 700; border-bottom: 2px solid #1976D2; padding-bottom: 2px; }
.main-title { font-size: 2rem; font-weight: 700; color: #1a2b4e; margin-bottom: 8px; }
.subtitle { color: #5a6a8a; }

/* 卡片和分区标题 */
.report-card { border: 1px solid #e0e6f1; border-radius: 12px; margin-bottom: 24px; overflow: hidden; }
.section-title { color: #1a2b4e; font-weight: 600; font-size: 1.5rem; }
.sub-heading { font-size: 1.1rem; font-weight: 600; color: #3c4d6f; margin-bottom: 16px; }

/* 通用元素样式 */
.custom-list { list-style: none; padding: 0; color: #202124}
.custom-list li { display: flex; align-items: flex-start; margin-bottom: 12px; line-height: 1.6; }
.v-table { border: 1px solid #e0e6f1; border-radius: 8px; }
.v-table thead { background-color: #f8f9fd; }
.v-table .highlight-row { background-color: #e3f2fd; }
/* 修复 5.1 标题颜色 */
.tech-trends strong {
  color: #333; /* 确保标题为黑色 */
}

/* 修复 5.2 战略机会样式 */
.opportunity-item {
  padding: 12px;
  border: 1px solid #ffe58f;
  border-radius: 8px;
  background-color: #fffbeb;
  margin-bottom: 12px;
}
.opportunity-title {
  font-weight: 600;
  color: #d46b08; /* 匹配图片中的颜色 */
  margin-bottom: 4px;
}
.opportunity-item p {
  margin: 0;
  font-size: 0.9rem;
  color: #333; /* 确保正文为黑色 */
}

/* 修复 6. 风险挑战卡片样式 */
.risk-card {
  padding: 16px;
  height: 100%;
}
.risk-card h4 {
  margin-bottom: 8px;
}

/* 新的图表容器样式 */
.chart-wrapper {
  margin-top: 32px;
}
/* 特定分区样式 */
.price-segment { padding: 16px; margin-bottom: 12px; border-radius: 8px;}
.price-segment p { margin: 4px 0 0 0; font-size: 0.9rem; opacity: 0.9; }
.chart-container { margin-top: 24px; }
.chart-title { text-align: center; font-weight: 500; color: #5a6a8a; margin-bottom: 16px; }
.bar-chart { display: flex; justify-content: space-around; align-items: flex-end; height: 200px; padding: 0 24px; }
.bar-item { display: flex; flex-direction: column; align-items: center; }
.bar-value { font-size: 0.8rem; color: #3c4d6f; margin-bottom: 4px; }
.bar { background: linear-gradient(to top, #64b5f6, #1976d2); width: 40px; border-radius: 4px 4px 0 0; }
.year-label { margin-top: 8px; font-size: 0.9rem; color: #3c4d6f; }
.feature-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.demand-card { padding: 16px; margin-bottom: 12px; border-radius: 8px;}
.demand-card p { margin: 4px 0 0 0; font-size: 0.9rem; }
.brand-card { padding: 16px; height: 100%;}
.opportunity-card { padding: 12px; margin-bottom: 8px; border-radius: 8px;}
.param-card { padding: 12px; text-align: left; height: 100%; border-radius: 8px;}
.param-card div:first-child { font-size: 0.8rem; color: #5a6a8a; margin-bottom: 4px; }
.param-card div:last-child { font-weight: 600; }

/* 报告底部 */
.report-footer { text-align: center; margin-top: 24px; font-size: 12px; color: #9aa5b8; padding-top: 24px; border-top: 1px solid #e0e6f1; }
.report-footer p { margin: 4px 0; }
</style>